<!--
 * @Author: your name
 * @Date: 2020-04-24 18:10:26
 * @LastEditTime: 2020-04-29 09:30:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \five\index.html
 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta content="yes" name="apple-mobile-web-app-capable" />
   <meta content="yes" name="apple-touch-fullscreen" />
   <meta content="telephone=no,email=no" name="format-detection" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>声撩明星联赛</title>
   <link rel="stylesheet" href="./index.css" />
 </head>
 <body>
   <div v-cloak id="app">
     <div class="background-image" style="background-color: #333; height: 100vh;display: none;">
       <img width="100%"
            src="https://img.alicdn.com/imgextra/i4/668603298/TB2ZuSVgQKWBuNjy1zjXXcOypXa_!!2-martrix_bbs.png">
     </div>
     <div id="main">
     <img class="head-img" src="./images/header.png" width="100%" alt="">
     <!-- 联赛奖励 -->
     <div class="award-wrapper">
       <div class="award-nav">
         <div :class="{ 'btn': true, 'charm-btn': true, 'cc-1': awardStage === 1 }" @click="changeAwardStage(1)">魅力明星</div>
         <div :class="{ 'btn': true, 'rich-btn': true, 'cc-2': awardStage === 2 }" @click="changeAwardStage(2)">富豪明星</div>
       </div>
       <div v-show="awardStage === 1" class="award-content">
         <!-- 魅力明星第一名 -->
         <img class="title award-first" src="./images/charm1.png" alt="">
         <div class="award-box one-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-0/钻石宝箱@3x.png" alt="">
             </div>
             <p>20万钻石</p>
             <p>永久</p>
           </div>
           <div class="award middle">
             <div class="gift-img">
               <img src="./images/charm-0/勋章-01@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>勋章30天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-0/魅力明星-头饰1@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>头饰30天</p>
           </div>
         </div>
         <div class="award-box two-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-0/魅力明星1@2x@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>气泡30天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-0/兰博基尼@3x.png" alt="">
             </div>
             <p>兰博基尼座驾</p>
             <p>30天</p>
           </div>
         </div>
         <!-- end -->

         <!-- 魅力明星第二名 -->
         <img class="title award-first" src="./images/charm2.png" alt="">
         <div class="award-box one-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-1/钻石宝箱@3x.png" alt="">
             </div>
             <p>10万钻石</p>
             <p>永久</p>
           </div>
           <div class="award middle">
             <div class="gift-img">
               <img src="./images/charm-1/魅力明星-2勋章@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>勋章30天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-1/魅力明星-2头饰@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>头饰30天</p>
           </div>
         </div>
         <div class="award-box two-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-1/魅力明星1@2x@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>气泡30天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-1/兰博基尼@3x.png" alt="">
             </div>
             <p>兰博基尼座驾</p>
             <p>30天</p>
           </div>
         </div>
         <!-- end -->

          <!-- 魅力明星第三名 -->
          <img class="title award-first" src="./images/charm3.png" alt="">
          <div class="award-box one-line">
            <div class="award">
              <div class="gift-img">
                <img src="./images/charm-2/钻石宝箱@3x.png" alt="">
              </div>
              <p>5万钻石</p>
              <p>永久</p>
            </div>
            <div class="award middle">
              <div class="gift-img">
                <img src="./images/charm-2/魅力明星-3勋章@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>勋章15天</p>
            </div>
            <div class="award">
              <div class="gift-img">
                <img src="./images/charm-2/魅力明星-3头饰@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>头饰15天</p>
            </div>
          </div>
          <div class="award-box two-line">
            <div class="award">
              <div class="gift-img">
                <img src="./images/charm-2/魅力明星1@2x@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>气泡15天</p>
            </div>
            <div class="award">
              <div class="gift-img">
                <img src="./images/charm-2/1_0002_1_0001_奥迪@3x.png" alt="">
              </div>
              <p>奥迪座驾</p>
              <p>15天</p>
            </div>
          </div>
          <!-- end -->

           <!-- 魅力明星第4-10名 -->
           <img class="title award-first" src="./images/charm4.png" alt="">
           <div class="award-box one-line">
             <div class="award">
               <div class="gift-img">
                 <img src="./images/charm-3/钻石宝箱@3x.png" alt="">
               </div>
               <p>1万钻石</p>
               <p>永久</p>
             </div>
             <div class="award middle">
               <div class="gift-img">
                 <img src="./images/charm-3/魅力明星-4勋章@3x.png" alt="">
               </div>
               <p>声撩联赛</p>
               <p>勋章7天</p>
             </div>
             <div class="award">
               <div class="gift-img">
                 <img src="./images/charm-3/魅力明星-4头饰@3x.png" alt="">
               </div>
               <p>声撩联赛</p>
               <p>头饰7天</p>
             </div>
           </div>
           <div class="award-box two-line">
             <div class="award">
               <div class="gift-img">
                 <img src="./images/charm-2/魅力明星1@2x@3x.png" alt="">
               </div>
               <p>声撩联赛</p>
               <p>气泡7天</p>
             </div>
             <div class="award">
               <div class="gift-img">
                 <img src="./images/charm-3/1_0002_1_0001_奥迪@3x.png" alt="">
               </div>
               <p>奥迪座驾</p>
               <p>7天</p>
             </div>
           </div>
           <!-- end -->
       </div>
       <div v-show="awardStage === 2" class="award-content">
         <p class="rich-award-desc">富豪榜统计比赛时间内，用户赠送的联赛票总</p>
         <p class="rich-award-desc color-1">海选赛: 10钻=1票</p>
         <p class="rich-award-desc color-1">竞级赛: 50钻=1票</p>
         <p class="rich-award-desc color-1">复活赛: 50钻=1票</p>
         <p class="rich-award-desc color-1">总决赛: 100钻=1票</p>
         <!-- 魅力明星第一名 -->
         <img class="title award-first" src="./images/rich1.png" alt="">
         <div class="award-box one-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-0/钻石宝箱@3x.png" alt="">
             </div>
             <p>20万钻石</p>
             <p>永久</p>
           </div>
           <div class="award middle">
             <div class="gift-img">
               <img src="./images/rich-0/勋章_富豪明星1@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>勋章30天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-0/勋章_富豪明星-头饰1@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>头饰30天</p>
           </div>
         </div>
         <div class="award-box two-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-0/魅力明星1备份@2x@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>气泡30天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-0/兰博基尼@3x.png" alt="">
             </div>
             <p>兰博基尼座驾</p>
             <p>30天</p>
           </div>
         </div>
         <!-- end -->

         <!-- 魅力明星第二名 -->
         <img class="title award-first" src="./images/rich2.png" alt="">
         <div class="award-box one-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-1/钻石宝箱@3x.png" alt="">
             </div>
             <p>10万钻石</p>
             <p>永久</p>
           </div>
           <div class="award middle">
             <div class="gift-img">
               <img src="./images/rich-1/勋章_富豪明星2@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>勋章30天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-1/勋章_富豪明星-头饰2@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>头饰30天</p>
           </div>
         </div>
         <div class="award-box two-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-1/魅力明星1备份@2x@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>气泡30天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-1/兰博基尼@3x.png" alt="">
             </div>
             <p>兰博基尼座驾</p>
             <p>30天</p>
           </div>
         </div>
         <!-- end -->

          <!-- 魅力明星第三名 -->
          <img class="title award-first" src="./images/rich3.png" alt="">
          <div class="award-box one-line">
            <div class="award">
              <div class="gift-img">
                <img src="./images/rich-2/钻石宝箱@3x.png" alt="">
              </div>
              <p>5万钻石</p>
              <p>永久</p>
            </div>
            <div class="award middle">
              <div class="gift-img">
                <img src="./images/rich-2/勋章_富豪明星3@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>勋章15天</p>
            </div>
            <div class="award">
              <div class="gift-img">
                <img src="./images/rich-2/勋章_富豪明星-头饰3@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>头饰15天</p>
            </div>
          </div>
          <div class="award-box two-line">
            <div class="award">
              <div class="gift-img">
                <img src="./images/rich-2/魅力明星1备份@2x@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>气泡15天</p>
            </div>
            <div class="award">
              <div class="gift-img">
                <img src="./images/rich-2/1_0002_1_0001_奥迪@3x.png" alt="">
              </div>
              <p>奥迪座驾</p>
              <p>15天</p>
            </div>
          </div>
          <!-- end -->

           <!-- 魅力明星第4-10名 -->
           <img class="title award-first" src="./images/rich4.png" alt="">
           <div class="award-box one-line">
             <div class="award">
               <div class="gift-img">
                 <img src="./images/rich-3/钻石宝箱@3x.png" alt="">
               </div>
               <p>1万钻石</p>
               <p>永久</p>
             </div>
             <div class="award middle">
               <div class="gift-img">
                 <img src="./images/rich-3/勋章_富豪明星4@3x.png" alt="">
               </div>
               <p>声撩联赛</p>
               <p>勋章7天</p>
             </div>
             <div class="award">
               <div class="gift-img">
                 <img src="./images/rich-3/勋章_富豪明星-头饰4@3x.png" alt="">
               </div>
               <p>声撩联赛</p>
               <p>头饰7天</p>
             </div>
           </div>
           <div class="award-box two-line">
             <div class="award">
               <div class="gift-img">
                 <img src="./images/rich-2/魅力明星1备份@2x@3x.png" alt="">
               </div>
               <p>声撩联赛</p>
               <p>气泡7天</p>
             </div>
             <div class="award">
               <div class="gift-img">
                 <img src="./images/rich-3/1_0002_1_0001_奥迪@3x.png" alt="">
               </div>
               <p>奥迪座驾</p>
               <p>7天</p>
             </div>
           </div>
           <!-- end -->
       </div>
     </div>
     <!-- end -->

     <img class="ranking-title" src="./images/ranking-title.png" alt="">

     <div class="ranking-nav">
       <div :class="{ 'btn': true, 'charm-btn': true, 'cc-1': bigStage === 1 }" @click="changeBigStage(1),pauseAudio()">魅力榜</div>
       <div :class="{ 'btn': true, 'rich-btn': true, 'cc-2': bigStage === 2 }" @click="changeBigStage(2),pauseAudio()">富豪榜</div>
     </div>

     <div class="game-nav">
       <div :class="{'btn': true, 'mini': true, 'rich-btn': true, 'cc-2': stage === 1}" @click="changeStage(1),pauseAudio()">海选赛</div>
       <div :class="{'btn': true, 'mini': true, 'charm-btn': true, 'cc-1': stage === 2}" @click="changeStage(2),pauseAudio()">晋级赛</div>
       <div :class="{'btn': true, 'mini': true, 'charm-btn': true, 'cc-1': stage === 3}" @click="changeStage(3),pauseAudio()">复活赛</div>
       <div :class="{'btn': true, 'mini': true, 'charm-btn': true, 'cc-1': stage === 4}" @click="changeStage(4),pauseAudio()">总决赛</div>
     </div>

     <!-- 竞级说明 -->
     <img v-show="bigStage === 1" class="game-desc" :src="'./images/stage' + stage + '.png'" alt="图片">
     <!-- end -->

     <!-- 搜索框 -->
     <div v-show="stage === 1 && bigStage === 1" class="search-box">
       <div class="search-wrapper" @click="searchChange(0)">
         <label for="search" v-show="searchStage === 1">输入你想投票的ID</label>
         <input v-model='form2.search' id="search" class="search" type="text">
         <i></i>
       </div>
       <div class="search-btn"@click="getVoice(3)">搜一下</div>
     </div>
     <!-- end -->

     <!-- 排行榜 -->
     <div v-show="stage !== 1 || bigStage === 2" class="ranking-box">
       <table>
         <tbody>
           <tr v-for="(item, index) in winnersList" :key="'ranking-' + index" :class="{ 'ranking-item-bg': index % 2 === 1 }">
             <td width="10%" :class="{'ranking': true, 'ranking-1': index === 0, 'ranking-2': index === 1, 'ranking-3': index === 2 }">{{ index +1 }}</td>
             <td width="20%">
               <div :class= "{'ranking-img': true, 'border-1': index === 0 , 'border-2': index === 1, 'border-3': index === 2}">
                 <img  :src="item.portrait" width="100%" alt="">
               </div>
             </td>
             <td width="50%">
               <p>{{ item.nickname }}</p>
               <p>ID:{{ item.uuid }}</p>
             </td>
             <td width="20%">
               {{ item.score }} 票
             </td>
           </tr>
         </tbody>
       </table>
     </div>

     <!-- end -->

     <!-- 语音列表 -->
     <div v-show="(stage === 1 || stage ===4) && bigStage === 1" class="audio-box">
       <div v-for="(item, index) in voiceList" :class="{'audio-item': true, gap: index % 2 === 1}" :key="'five-' + index">
         <div class="tag" v-show="item.ret.length !==0">{{item.ret.length !==0 ? item.ret.timbre.label : ''}}</div>
         <div class="audio-img">
           <img  :src="item.portrait" width="100%" alt="">
         </div>
         <div class="user-info-box">
           <div class="user-info" >
             <p class="nickname">{{ item.nickname }}</p>
             <div class="Audio">
               <audio id="audioTag" class="voice" :src="item.audio_url" ></audio>
               <div class="pgs" @click="playAudio(index)">
                   <div class="pgs-play" id="progress">
                     <img src="./images/audioplay.png" :class="'audio-img1 playImg' + index" >
                   </div>
                   <div class="controls">
                     <!-- <span class="played-time">00:00</span> -->
                     <button class="play-pause" id="playPause">
                         <span class="icon-btn icon-play"></span>
                     </button>

                 </div>
                   <span class="audio-time" id="audioTime"><p>{{ item.audio_time }}s</p></span>

               </div>

           </div>


           </div>
           <p class="ticket">{{ item.vote_sum_num }} 票</p>
           <!-- <div class="vote-btn" @click=" item.stage === 0  || item.stage === 3 ? showDialog(item.user_id): ''">投票</div> -->
           <div class="vote-btn" @click="download(),pauseAudio()">投票</div>
         </div>
       </div>
       <div class="page-box">
         <div class="page prev-btn" @click="getVoice(0),pauseAudio()">上一页</div>
         <div class="page next-btn" @click="getVoice(1),pauseAudio()">下一页</div>
       </div>

     </div>
     <!-- end -->



     <p class="activity-desc tt">本活动所有18岁以上的用户均可参加。</p>
     <p class="activity-desc">本活动最终解释权归声撩所有，与苹果公司无关。</p>

     <div v-show="dialogState" class="dialog">
       <div class="dialog-box">
         <div class="dialog-plus" @click="num_minus">-</div>
         <input v-model="form.vote_num" class="input" type="text" @input="checkNumber">
         <div class="dialog-minus" @click="num_plus">+</div>
       </div>
       <p class="dialog-desc">我的票数: {{initvote_num}}</p>

       <!-- <div class="dialog-btn"></div> -->
       <img class="dialog-btn" src="./images/vote-btn.png" alt="" @click="toVote()">
     </div>
     <img  class="bottom-img" src="./images/底导航备份@3x.png" alt="" @click="download()">
      <!-- 遮罩层 -->
      <!-- <div v-show="dialogState" class="overlay" @click.stop="showDialog(false)"></div> -->
      <div v-show="overlayShow" class="overlay" @click.stop="closeAllDialog()"></div>
      <!-- end -->
      <!-- 输入手机号遮罩层 -->
     <div v-show="dialogShow" id="phone-dialog">
       <p class="phone-desc">加入声撩，为TA助力</p>
       <input v-model="form1.phone" class="phone-input" type="text" @input="checkPhone()">
       <div :class="[{ 'liao-btn-no': canSubmit }, 'liao-btn']" @click="canSubmit ? bindPhone() : ''">
         去APP助力
       </div>
     </div>
     <!-- 消息弹窗 -->
     <div id="over-dialog" v-show="canShowTip">
       <div class="close" @click="canShowTip = false"></div>
       <p>{{ msg }}</p>
       <div class="btn" @click="closeAllDialog()">
         知道啦
       </div>
     </div>
     <!-- end -->
   </div>
   </div>
 </body>
 <script src="./js/vue.js"></script>
 <script src="./js/tool.js"></script>
 <script src="./js/flex.js"></script>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
      stage: 1,
      bigStage: 1,
      awardStage: 1,
      dialogState: false,
      // baseUrl: 'http://xs.ztaudio-activity.com',
      baseUrl: 'http://ztaudio-activity.kekestar.cn',
      // apiUrl: 'http://47.100.52.89',
      apiUrl:"https://sl-api.bianxiangapp.com:8866",
      winnersList: [],
      richList: [],
      voiceList: [],//语音数据
      form: {
       user_id: '',
       to_user_id: '',
       vote_num: 0,
       stage:''
      },
      query: {
        page: 1,
        limit: 8,
        search:''
      },
      form1:{
        phone:'',
        code: ''
      },
      form2:{
        search:''
      },
      user: {
         nickname: '',
         headimg: '',
         qrCode: '',
         uuid: '',
         register_at: '',
         code: '',
         grand_total: 0,
         current_month_total: 0,
         user_id: 0
       },

      searchStage: 1,//搜索框文字
      overlayShow: false,
      dialogShow: false,//输入手机号弹出层
      canSubmit: false,
      initvote_num:'',//用户可用投票数
      msg: '',
      canShowTip:false,
      staticVoteNum:0,
      code:'',
      share:''
     },
     computed: {
       textUrl: function(){
         return this.baseUrl + "/five/index.html";
       },
       // voteNum: function(){
       // }
     },
     watch: {
       voiceList: function() {
         this.$nextTick(function() {
           this.listenerAudioPlay()
           // this.watchAudio()
         })
       }
     },
     mounted() {
       this.getCurrentUserInfo()
       // kk.env = 'production'

       this.getVoice()
       this.initVoteNum()
       if( this.stage ){
         this.changeStage(this.stage)
       }
     },
     created(){
       // this.listenerAudioPlay()
       this.stage = Number(kk.$_GET['stage']) ? Number(kk.$_GET['stage']):1
     },

     methods: {
       changeAwardStage(stage) {
         this.awardStage = stage
         this.awardGift = stage === 1 ? 'charm' : 'rich'
       },
       changeBigStage(stage) {
         this.bigStage = stage
         this.changeStage(1)
       },
       changeStage(stage) {
         this.stage = stage
         this.bigStage === 1 ? this.getCharm() : this.getRich()
         this.form2.search = ''
         if(stage ===4){
           this.getVoice(4);
         }

       },
       getCharm() {
         let _this = this
         kk.ajaxGet(_this.baseUrl + '/five/winner', { stage: _this.stage }, function(res) {
           _this.winnersList = res.data
         })
       },
       getRich() {
         let _this = this
         if(_this.stage === 1) _this.winnersList = []
         kk.ajaxGet(_this.baseUrl + '/five/rich', { stage: _this.stage }, function(res) {
           _this.winnersList = res.data
         })
       },

       //用户搜索
       searchChange(code) {
         this.searchStage = code
       },
       //语音列表 path:0 上一页 1下一页 2当前页 3通过user_id搜索
       getVoice(path) {
         let _this = this

         if(path === 0 && _this.query.page > 1) {
           _this.query.page--
         }

         if(path === 1 ) {
           _this.query.page++
         }
         if(path === 2) {
           _this.query.page
         }
         if(path === 3) {
          if(this.form2.search =='') {
            this.query = {
              page: 1,
              limit: 8,
            }
          }else{
            this.query = {
              search: this.form2.search,
              stage: this.stage
            }
            // this.query.search = this.form2.search,
            // this.query.stage =  this.stage
          }
        }
        if(path === 4||path ===1) {
          // this.query = {
          //     stage: this.stage
          //   }
          this.query.stage=this.stage
        }
         this.pauseAudio()
         kk.ajaxGet(_this.baseUrl + '/five/voice', _this.query, function(res) {
           // console.log(JSON.stringify(res.data.ret))
           _this.voiceList = res.data
         })
       },

       showDialog(user_id) {
           this.form.to_user_id = user_id
           this.form.user_id = this.user.user_id
           this.dialogState = true
           this.overlayShow = true
           // this.toVote()
       },
       closeAllDialog() {
         this.overlayShow = false
         this.dialogShow = false
         this.dialogState = false
         this.canShowTip = false
         this.resetForm()
       },
       resetForm() {
         this.form = {
           user_id: 0,
           to_user_id: '',
           vote_num: 0
         }
         this.form1 = {
           phone: ''
         }
         this.initVoteNum()
       },
       //用户投票
       toVote() {
         let _this = this
         _this.form.stage = this.stage
         // _this.form.user_id = 70
         // _this.form.to_user_id = 70
         if(_this.form.user_id ==_this.form.to_user_id){
           _this.msg = '不符合投票规则'
           _this.canShowTip = true
           return false
         }
         if(this.staticVoteNum == 0){
           _this.msg = '今日投票次数用光啦，去派对送ta联赛票继续助力吧！'
           _this.canShowTip = true
           return false
         }
         if(!_this.form.vote_num){ return false}

         if(this.staticVoteNum >= this.form.vote_num ){
           kk.ajaxPost(_this.baseUrl + '/five/vote', _this.form, function(res) {
           let {code,message} = res
           if(code == 200) {
             _this.getVoice(2)
             _this.msg = message
             _this.canShowTip = true
             _this.initVoteNum()
             _this.getCharm()
             _this.dialogState = false
           }
         })
         }
         // _this.msg = '不符合规则'
         // _this.canShowTip = true

       },
       num_minus(){
         let _this = this
         if(_this.form.vote_num > 0){
           _this.form.vote_num--
           this.initvote_num++
         }
       },
       num_plus(){
         let _this = this
         if( _this.form.vote_num < this.staticVoteNum && this.initvote_num > 0){
           _this.form.vote_num++
           this.initvote_num--
         }
       },
       //获取用户信息
       getCurrentUserInfo() {
         let _this = this
         kk.ajaxGet(_this.baseUrl + '/convene/invite/' + kk.$_GET['user_id'], {}, function(res) {
           _this.user = res.data.user_info
         })

       },
       toShareNoQrcode() {
         kk.share(this.user.portrait,'声撩的夏天','想成为明星，就差你的投票啦~', this.baseUrl +"/five/share.html?code=" + this.user.code+"&stage="+this.stage)
       },
       //分享弹窗
       download(state) {

         if (/(iPhone|iPad|iPod|iOS)/i.test( navigator.userAgent)) {
            if (navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1) {
                 document.getElementById("main").style.display = "none"
                 document.getElementsByClassName("background-image")[0].style.display = "block"
             }else{
              this.redirect_url = "https://itunes.apple.com/cn/app/id1507139957"
             this.showDialog_share(true)
             }

         } else {
             if (navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1) {
                 document.getElementById("main").style.display = "none"
                 document.getElementsByClassName("background-image")[0].style.display = "block"
             }else{
               this.redirect_url = "https://ztaudio-api.kekestar.cn/system/version/get?channel_id=600000"
               this.showDialog_share(true)
             }
         }
       },
       checkPhone() {
         let _this = this
         if(!(/^1[3456789]\d{9}$/.test(this.form1.phone))){
           _this.canSubmit = false
         }  else {
           _this.canSubmit = true
         }
       },
       bindPhone() {
         let _this = this
         _this.form1.code = _this.user.code
         kk.ajaxGet(_this.baseUrl + '/five/bindPhone', _this.form1, function(res) {
           let { code, message } = res
           if(code === 200){
             _this.closeAllDialog(false)
             window.location.href = _this.redirect_url
           } else {
            //  _this.msg = message
            //  _this.canShowTip=true
            kk.H5toApp()
           }
           })
       },
       showDialog_share(state) {
         this.overlayShow = state
         this.dialogShow = state
         this.canSubmit = false
       },

       initVoteNum(){
         let _this = this
         kk.ajaxGet(_this.baseUrl + '/five/initVoteNum', { user_id: _this.user.user_id?_this.user.user_id: kk.$_GET['user_id']}, function(res) {
           let { code, data,message } = res
           if(code === 200){
             _this.initvote_num = data
             _this.staticVoteNum = data
           }
         })
       },

       listenerAudioPlay() {
         let audioObj = document.getElementsByClassName('voice')
         let imgObj = document.getElementsByClassName("audio-img1")
         for(let i=0,len = audioObj.length; i<len;i++) {
           audioObj[i].addEventListener('ended',function() {
             for(let k=0, len = audioObj.length; k < len; k++) {
               if(i == k) {
                 // audioObj[k].pause()
                 imgObj[k].setAttribute('src', './images/audioplay.png')
               }
             }
           }
           )
         }
       },

       playAudio(index) {
         let audioObj = document.getElementsByClassName('voice')
         let imgObj = document.getElementsByClassName("playImg" + index)
         let imgObjall = document.getElementsByClassName("audio-img1")

         for(let i=0,len = audioObj.length; i<len;i++) {
          audioObj[i].pause()
          imgObjall[i].setAttribute('src', './images/audioplay.png')
           if(index === i) {
            audioObj[i].play()
            imgObj[0].setAttribute('src', './images/audiopause.png')
          }

         }
       },
       //音频暂停
       pauseAudio() {
         let audioObj = document.getElementsByClassName('voice')
         let imgObjall = document.getElementsByClassName("audio-img1")
         for(let i=0,len = audioObj.length; i<len;i++) {
          audioObj[i].pause()
          imgObjall[i].setAttribute('src', './images/audioplay.png')
         }
       },
       checkNumber() {
         if(this.form.vote_num < 0 ) {
           this.form.vote_num = 0
         }
         if( Number(this.form.vote_num) > Number(this.staticVoteNum)) {
           this.form.vote_num = this.staticVoteNum
         }
       }
     },
   })
 </script>
 </html>
